<template>
    <div class="novel-root" ref="galContent" @scroll="content_ScrollEvent">

        <!-- 检索栏 -->
        <mySelect @change="select_ChangeEvent"></mySelect>

        <!-- 移动详情栏 -->
        <myMoveInfo ref="moveInfoDom"></myMoveInfo>

        <!-- 回到顶部 -->
        <myGtoTop></myGtoTop>

        <!-- 列表栏 -->
        <div class="novel-content gtoTop" ref="novelContentDom">
            <TransitionGroup :css="false" @enter="item_EnterEvent">
                <div class="novel-item" v-for="(item, index) in dataList" :key="index" @click="item_ClickEvent(item.id)"
                    @mouseenter="item_MouseenterEvent(index)" @mouseleave="item_MouseleaveEvent">
                    <div class="item-image"
                        :style="'background-image: url(http://127.0.0.1:5242/迷茫管家与懦弱的我/image.webp);'"></div>
                    <!-- <div class="item-image" :style="'background-image: url(' + item.backImage + ');'"></div> -->
                    <!-- <div class="item-image"
                        :style="'background-image: url(https://127.0.0.1:5242/' + item.name + '/image.jpg);'"></div> -->
                    <div class="item-title"><span>{{ item.name }}</span></div>
                </div>
            </TransitionGroup>
        </div>

    </div>

</template>

<script setup>
import { onMounted, onUpdated } from 'vue'
import { getNovelList_API } from '@/axios/api/novel.js'
import { useFileStores } from '@/stores/index.js'
import mySelect from './select.vue'
import myMoveInfo from './moveInfo-v2.vue'
import myGtoTop from '@/components/layout/item/gtoTop.vue'
import gsap from 'gsap'

const fileStores = useFileStores();

const dataList = ref([]);
let isLoad = false;
let pageData = {
    page: 1,
    perPage: 30,
};
const selectData = ref({
    text: '',
    tagId: '',
});
let drawIndex = 0;


defineOptions({
    name: 'novel',
})

onMounted(() => {
    selectData.value = fileStores.getSelectNovelTagToString();
    loadLastPage(1);
})

onUpdated(() => {
    galContent.value.scrollTop = curScroll;
})

const item_ClickEvent = (id) => {
    router.push('/novel/info?id=' + id);
}

const loadLastPage = (page) => {
    if (isLoad) return;
    loading.show();
    isLoad = true;
    drawIndex = 0;
    const { perPage } = pageData;
    const { text, tagId } = selectData.value;

    getNovelList_API({
        page: page,
        perPage: perPage,
        text: text,
        tagId: tagId,
    }).then(res => {
        if (page == 1)
            dataList.value = [];
        for (let i = 0; i < res.result.data.length; i++) {
            const data = res.result.data[i];
            data.backImage += `${data.name}/image.jpg`;
            dataList.value.push(res.result.data[i]);
        }
        pageData = res.result.page;
    }).finally(() => {
        loading.hide();
        isLoad = false;
    })
}

const select_ChangeEvent = (data) => {
    fileStores.setSelectTag('novel', data);
    selectData.value = fileStores.getSelectNovelTagToString();//重拉取
    loadLastPage(1)
}

//#region 触底加载
let curScroll = 0;
const galContent = ref();
const content_ScrollEvent = (e) => {
    const { page, maxPage } = pageData;
    if (page >= maxPage) return;
    const height = galContent.value.clientHeight;
    const cur = e.target;
    if (cur.scrollTop + height + 20 > cur.scrollHeight) {
        loadLastPage(pageData.page + 1);
    }
    curScroll = cur.scrollTop;
}
//#endregion

//#region anime
const item_EnterEvent = (el, done) => {
    gsap.to(el, {
        delay: 0.03 * drawIndex,
        duration: 0.3,
        margin: 5,
        opacity: 1,
        onComplete: done,
    });
    drawIndex++;
}
//#endregion

//#region moveInfo
const novelContentDom = ref();
const moveInfoDom = ref();
const item_MouseenterEvent = (index) => {
    const dom = novelContentDom.value.childNodes[index + 1].childNodes[0].getBoundingClientRect();
    moveInfoDom.value.move(dom.x + dom.width + 10, dom.y, dataList.value[index]);
}
const item_MouseleaveEvent = () => {
    moveInfoDom.value.reset();
}
//#endregion

</script>

<style scoped lang="scss">
.novel-root {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-image: url('$/images/01.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;

    .novel-content {
        width: 100%;
        max-width: 800px;
        margin: auto;
        padding-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        .novel-item {
            box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.5);
            font-weight: 900;
            transition-duration: 0.3s;
            cursor: pointer;
            opacity: 0;
            display: flex;
            flex-direction: column;

            .item-image {
                width: 170px;
                height: 240px;
                background-size: cover;
                background-position: center;
                border-radius: 7px;
            }

            .item-title {
                font-size: 13px;
                text-align: center;
                font-weight: 500;
                padding: 2px 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                background: #409eff;
                margin-top: 3px;
                border-radius: 7px;
                margin: auto;
                max-width: 140px;
                display: inline-block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-top: 5px;
            }
        }

        .novel-item:hover>.item-image {
            transition-duration: 0.3s;
            transform: scale(1.05);
        }

    }
}
</style>